<template>
	<view class="bei">
		<image
			src="https://cdn4.codesign.qq.com/screen-slices/2024/10/14/AE9KQ24VXEeW10gGYZl14/rxdehrjo9jf5zlwh/b0f30729-78fb-4fad-b902-ec7f4d7a4838.png?imageMogr2/thumbnail/700x650/interlace/1"
			mode=""></image>
	</view>
	<view class="personal">
		<view class="personalnamea">
			<image class="boximg" src="../../static/303.jpg" mode="" v-if="!title.avatar"></image>
			<image class="boximg" :src="title.avatar" mode="" v-else></image>
		</view>
		<view class="centext">
			<view class="personalname">
				<view class="name"> 昵称: </view>
				<view class="text">
					{{title.nickName}}
				</view>
			</view>
			<view class="personalname">
				<view class="name"> 手机号: </view>
				<view class="text">
					{{title.mobile}}
				</view>
			</view>
		</view>
	</view>
	<view class="erwei">
		<view class="imaf">
			<image :src="detailsDatabaa" mode=""></image>
		</view>
		<!-- <view class="chengo">
			<view class="yao">
				已成功邀请
			</view>
			<view class="ren">
				{{ye.recCount}} 人
			</view>
		</view> -->
	</view>
	<view class="ner">
		<scroll-view class="ner" scroll-y="true" style="height: 379rpx;">
			<view class="tuijian" v-if="!personal"> 暂无推荐 </view>
			<view class="liyi" v-for="(item,index) in personal" v-else>
				<view class="liimg">
					<view class="imge" v-if="!item.memberUrl">
						<image src="../../static/303.jpg" mode=""></image>
					</view>
					<view class="imge" v-else>
						<image :src="item.memberUrl" mode=""></image>
					</view>
					<view class="imgtext">
						{{item.memberName}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		myRecommendCode, //我的二维码
		memberInfo,
		myRecommend //我的推荐
	} from "../../request/api.js"
	export default {
		data() {
			return {
				ye: '',
				url: '',
				detailsDatabaa: '',
				userInfo: {},
				personal: {},
				title: {}
			}
		},
		onLoad() {},
		onShow() {
			this.title = uni.getStorageSync('userInfo')
			this.myRecommenda()
			this.yemian()
		},
		methods: {
			myRecommenda() {
				myRecommend({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					this.personal = res.result.firstRec
				})
			},
			getImageSrc(base64Data) {
				return `data:image/png;base64,${base64Data}`;
			},
			yemian() {
				let userid = uni.getStorageSync('userInfo').id
				console.log(userid, 'popo')
				myRecommendCode({
					memberId: uni.getStorageSync('userInfo').id
				}).then(res => {
					console.log(res, '页面');
					this.ye = res.result
					this.detailsDatabaa = 'data:image/png;base64,' + res.result
					this.detailsDatabaa = this.detailsDatabaa.replace(/[\r\n]/g, "");
					console.log(this.ye.recInfo.recCode, 'ok');
				})
			},
			member() {
				uni.navigateBack({})
			},
			membera() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},
			memberb() {
				uni.navigateTo({
					url: '/pages/vip/income'
				})
			},
			memberc() {
				uni.navigateTo({
					url: '/pages/vip/withdrawal'
				})
			},
			follow() {
				uni.navigateTo({
					url: '/pages/vip/team'
				})
			},
		},
	}
</script>
<style scoped lang="less">
	.topstart {
		height: var(--status-bar-height);
	}

	.ceshai {
		// height: 375rpx;
		// background: linear-gradient(22deg, #FAFAFA 0%, #FBE6E2 100%);
	}

	.tuijian {
		margin: 100rpx;
	}

	.header {
		margin-top: 30rpx;
		// text-align: center;
		color: #170000;
		font-size: 36rpx;
		display: flex;
		align-items: center;

		// margin-bottom: 0rpx;
		.hui {
			width: 36rpx;
			height: 36rpx;
			margin-right: 240rpx;
			margin-left: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.bei {
		width: 100vw;
		height: 2688rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -99;

		image {
			width: 100vw;
			height: 2688rpx;
		}
	}

	.erwei {
		margin: 34rpx;
		background: #FFE9D5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.6);
		// margin-top: 430rpx;
		// margin-top: 320rpx;
		margin-top: 0rpx;
		padding: 0 24rpx;
		box-sizing: border-box;

		.imaf {
			margin: 0 auto;
			margin-top: 87rpx;
			width: 352rpx;
			height: 352rpx;
			margin-bottom: 70rpx;

			image {
				width: 352rpx;
				height: 352rpx;
			}
		}

		.chengo {
			display: flex;
			justify-content: space-between;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			font-style: normal;
			text-transform: none;
		}
	}

	.ner {
		width: 702rpx;
		height: 379rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.liyi {
		display: flex;
		background: #FFFFFF;
		justify-content: space-between;
		align-items: center;
		height: 130rpx;
		padding: 0 27rpx;
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.liimg {
			display: flex;
			align-items: center;

			.imgtext {
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
				margin-left: 30rpx;
			}
		}

		.youbian {
			width: 11rpx;
			height: 20rpx;

			image {
				width: 11rpx;
				height: 20rpx;
			}
		}
	}

	.imge {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
		}
	}

	.personal {
		height: 186rpx;
		margin: 34rpx;
		background: #FFE9D5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.6);
		margin-top: 950rpx;
		margin-bottom: 0rpx;
		padding: 28rpx 42rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.personalnamea {
			width: 118rpx;
			height: 118rpx;
			margin-right: 15rpx;

			image {
				width: 118rpx;
				height: 118rpx;
				border-radius: 50rpx;
			}
		}

		.centext {
			.personalname {
				display: flex;
				align-items: center;

				.name {
					color: #333333;
					font-size: 28rpx;
					font-weight: 700;
				}

				.text {
					color: #333333;
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}
	}
</style>